<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
<!--view层 模板-->
<div id="app">
    <xiaofan v-for="item in items" v-bind:xf="item"></xiaofan>
</div>

<script>
    'use strict'

    Vue.component("xiaofan", {
        // 给组件传递数据需要用props
        props: ['xf'],
        template: '<h1>{{xf}}</h1>'
    })

    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            items: ['java', 'linux', 'python']
        }
    })
</script>
</body>

</html>